<template>
    <div>
      <nav-header></nav-header>
      <nav-bread>dfljkdlfj</nav-bread>
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <div class="filter-nav">
            <span class="sortby">Sort by:</span>
            <a href="javascript:void(0)" class="default cur">Default</a>
            <a href="javascript:void(0)" class="price" @click="sortGoods">
              Price 
              <!-- <svg class="icon-arrow-short">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-short"></use>
              </svg> -->
              <span class="icon-arrow-short" :class="{'sort-up':!sortFlag}"></span>
            </a>
            <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
          </div>
          <div class="accessory-result">
            <!-- filter -->
            <div class="filter stopPop" id="filter" :class="{'filterby-show':filterBy}">
              <dl class="filter-price">
                <dt>Price:</dt>
                <dd @click="setPriceFilter('all')"><a href="javascript:void(0)" :class="{'cur':priceChecked=='all'}">All</a></dd>
                <dd v-for="(item,index) in priceFilter" @click="setPriceFilter(index)">
                  <a href="javascript:void(0)" :class="{'cur':priceChecked==index}">{{item.startPrice}} - {{item.endPrice}}</a>
                </dd>
              </dl>
            </div>

            <!-- search result accessories list -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="(item,index) in goodsList">
                    <div class="pic">
                      <a href="#"><img v-lazy="'/static/'+item.productImage" alt=""></a>
                    </div>
                    <div class="main">
                      <div class="name">{{item.productName}}</div>
                      <div class="price">{{item.salePrice}}</div>
                      <div class="btn-area">
                        <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div v-show="loading" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30" style="text-align: center;">
                  <img src="../assets/loading-spinning-bubbles.svg">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="md-overlay" v-show="filterBy" @click="filterBy=false"></div>
      <nav-footer></nav-footer>
      <modal :mdShow="mdShow" @close="closeMadol">
        <p slot="message">请先登录，否则无法加入购物车！</p>
        <div slot="btn-group" style="text-align: center;">
          <a class="btn btn--m" @click="mdShow=false">关闭</a>
        </div>
      </modal>
      <modal :mdShow="mdShowCart" @close="mdShowCart=false">
        <p slot="message">
          <span>加入购物车成功！</span>
        </p>
        <div slot="btn-group" style="text-align: center;">
          <a class="btn btn--m" @click="mdShowCart=false">继续购物</a>
          <router-link class="btn btn--m" to="/cart">查看购物车</router-link>
        </div>
      </modal>      
    </div>
</template>
<script>
    import "./../assets/css/base.css"
    import "./../assets/css/product.css"
    import NavHeader from "@/components/Header"
    import NavFooter from "@/components/Footer"
    import NavBread from "@/components/NavBread"
    import Modal from "@/components/Modal"
    import axios from "axios"
    export default {
        data(){
            return{
                goodsList:[1,2],
                priceFilter:[
                  {
                    startPrice:'0.00',
                    endPrice:'500.00'
                  },
                  {
                    startPrice:'500.00',
                    endPrice:'1000.00'
                  },
                  {
                    startPrice:'1000.00',
                    endPrice:'2000.00'
                  }
                ],
                priceChecked:"all",
                filterBy:false,
                sortFlag:true,
                page:1,
                pageSize:3,
                busy: true,
                loading: false,
                mdShow:false,
                mdShowCart:false
            }
        },
        components:{
          NavHeader,NavFooter,NavBread,Modal
        },
        created(){
          this.getGoodsList();
        },
        methods:{
          closeMadol(){
            this.mdShow=false
          },
          getGoodsList(flag){
            let param={
              page:this.page,
              pageSize:this.pageSize,
              sort:this.sortFlag?1:-1,
              priceLevel:this.priceChecked
            }
            this.loading=true
            axios.get("/goods/list",{
              params:param
            }).then((response)=>{
              let res=response.data;
              if (res.status=='0') {
                this.loading=false
                if(flag){
                  this.goodsList=this.goodsList.concat(res.result.list);
                  if (res.result.count<this.pageSize) {
                    this.busy=true
                  }else{
                    this.busy=false
                  }
                }else{
                  this.goodsList=res.result.list;
                  this.busy=false
                }
              } else {
                this.goodsList=[]
              }
            })        
          },
          setPriceFilter(index){
            this.priceChecked=index;
            this.filterBy=false;
            this.page=1;
            this.getGoodsList();
          },
          showFilterPop(){
            this.filterBy=true;
          },
          sortGoods(){
            this.sortFlag=!this.sortFlag;
            this.page=1;
            this.getGoodsList();
          },
          loadMore() {
            this.busy = true;
            setTimeout(() => {
              this.page++;
              this.getGoodsList(true);
            }, 500);
          },
          addCart(productId){
            axios.post('/goods/addCart',{productId}).then(res=>{
              console.log(res,"res")
              if (res.data.status==0) {
                //alert("加入购物车成功")
                this.mdShowCart=true
              }else{
                //alert("msg:"+res.data.msg)
                this.mdShow=true;
              }
            })
          }
        }
    }
</script>
<style scoped>
  .sort-up{
    transform: rotate(180deg);
    transition:all 0.3s ease-out;
  }
</style>
